<template>
    <div class="box">
        <h3>axios的请求响应拦截器定义</h3>
        <ol>
            <li>按照axios的拦截定义语法完成请求响应拦截定义描述
                <img src="@/index/assets/31.png" alt="" srcset="">
            </li>
            <li>在需要使用异步请求的 代码中 通过定义了拦截的 axios 对象进行请求发送</li>
        </ol>
        <p>axios在node模块环境中的使用注意事项</p>
        <ul>
            <li>node的模块加载是具有缓存功能的，所以无论项目中什么位置什么时候进行同一个模块的多次加载，始终读取的都是同一个对象</li>
            <li>.vue单文件组件export default 以外的js代码属于加载时直接运行的全局代码，所以这部分代码无论组件是否使用都会在运行初期直接完成执行</li>
            <li>直接对axios进行操作的所有的全局配置[默认地址、超时时间、拦截器]会在所有基于axios发送的请求中生效</li>
            <li>但实际项目开发时，一个模块项目可能会对接多个不同的后台服务器，此时axios的配置需要区分服务器，可以采用 axios的副本构建工具创建副本
                <img src="@/index/assets/32.png" alt="" srcset="">
            </li>
        </ul>
        <p>{{ result.state }}</p>
        <p>{{ result.msg }}</p>
        <pre>{{ result.data }}</pre>
        <input type="button" value="基于拦截器加载后台数据" @click="loadServeData1()">
        <input type="button" value="基于拦截器加载后台数据" @click="loadServeData2()">
    </div>
</template>

<script>
import axios from "axios"
const request = axios.create();
const ERROR_MSG={
    ERR_NETWORK:"网络异常，请检查网络连接",
    ECONNABORTED:"请求超时,请稍后重试"
};
const HTTP_MSG={
    401:"未授权",
    404:"访问资源不存在",
    500:"服务器出现异常",
    DEFAULT:"服务器太忙了,你待会再试"
}
request.interceptors.request.use(
    function(config){
        return config;
    },
    function(error){
        // 继续保持 Promise 错误对象的返回，让后续的调用方法可以继续调用Promise语法
        return Promise.reject(error);
    }
)
request.interceptors.response.use(
    function(response){
        console.log("响应")
        // 提前处理了响应数据，让后续的axios 的成功结果直接是 后台数据
        return response.data;
    },
    function(error){
        let msg="";
        if(error.response){//有响应的情况下
            msg= HTTP_MSG[error.response.status];
        }else{
            msg=ERROR_MSG[error.code]
        }
        alert(msg)
        // 继续保持 Promise 错误对象的返回，让后续的调用方法可以继续调用Promise语法,同时在浏览器控制台提示错误[为开发者服务的]
        return Promise.reject(msg)
    }
)

export default {
    data() {
        return {
            result: {}
        }
    },
    methods: {
        loadServeData1() {
            request.get("http://127.0.0.1:3000/public/types")
                .then((data)=>{
                    this.result = data;
                })
        },
        async loadServeData2() {
            this.result = await request.get("http://127.0.0.1:3000/public/types")
        }
    },
}
</script>

<style lang="scss" scoped>

</style>